<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练组管理</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <style>
        .layui-layer:has(#bound-transfer),
        .layui-layer-content:has(#bound-transfer) {
            background: transparent;
        }

        .layui-layer:has(#bound-transfer)>.layui-layer-title {
            display: none;
        }

        .layui-layer:has(#bound-transfer)>.layui-layer-setwin {
            top: 0.4rem;
        }

        #bound-transfer {
            background: url(../static/img/teambg.png);
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #add-form {
            width: 100%;
            height: calc(100% - 1rem);
            margin-top: 1rem;
        }

        #team-bound {
            height: calc(100% - 2rem);
            display: flex;
            justify-content: space-between;
        }

        #person-list {
            width: 41%;
            height: 100%;
        }

        #bound-list {
            width: 57%;
            height: 100%;
        }

        .bound-title {
            height: 0.5rem;
            line-height: 0.5rem;
            text-indent: 0.1rem;
            color: #9AD2D9;
        }

        .bound-con {
            width: 100%;
            height: calc(100% - 0.5rem);
            border: 1px solid #487177;
            border-radius: 0.27rem;
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
            overflow: auto;
        }


        .person-item {
            width: 18%;
            height: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 2.5% 0.9%;
            cursor: pointer;
            color: #fff;

            .person-item1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                height: 100%;
                justify-content: center;
                background-image: linear-gradient(30deg, #155668, #12293e, #061417);
                z-index: 4;
            }


            &.active {
                position: relative;
                color: #7feed9;
                box-shadow: rgb(0, 0, 0) 3px 3px 7px;

                &::before,
                &::after {
                    content: '';
                    top: -2px;
                    bottom: -2px;
                    left: -2px;
                    right: -2px;
                    border: 2px solid rgb(56, 192, 255);
                    border-image: linear-gradient(45deg, #00ffab, #0fa1f9) 1;
                    display: inline;
                    position: absolute;
                    animation: clippath 10s infinite linear;
                }

                &::before {
                    animation: clippath 10s infinite -5s linear;
                }
            }

            img {
                width: 0.72rem;
                height: 0.72rem;
                border-radius: 50%;
                margin-bottom: 0.1rem;
            }

            span {
                white-space: nowrap;
            }
        }

        @keyframes clippath {

            0%,
            100% {
                clip-path: inset(0 1% 99% 0);
            }

            25% {
                clip-path: inset(1% 99% 0 0);
            }

            50% {
                clip-path: inset(99% 0 0 1%);
            }

            75% {
                clip-path: inset(0 0 1% 99%);
            }
        }

        .bound-item {
            width: 18%;
            height: 27%;
            margin: 1% 3%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 0.03rem;
            border: 1px solid rgb(84, 115, 138);
            background-image: url(../static/img/wait.png);
            background-repeat: no-repeat;
            background-size: 50%;
            background-position: center;

            >.person-item {
                width: 100%;
                height: 100%;
                cursor: default;
                position: relative;

                i {
                    width: 0.32rem;
                    height: 0.32rem;
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    background: rgb(84, 115, 138);
                    color: #2ECDFF;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 0.03rem;
                }
            }
        }

        .bound-item-seq {
            width: 0.54rem;
            height: 0.54rem;
            background: #2ECDFF;
            color: #fff;
            text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.41);
            top: 0;
            left: 0;
            position: absolute;
            clip-path: polygon(100% 0px, 0 100%, 0px 0px);
            text-indent: 0.1rem;
            z-index: 7;
        }

        .layui-icon-disabled {
            width: 0.32rem;
            height: 0.32rem;
            position: absolute;
            top: -1px;
            right: -1px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 0.03rem;
            background: rgba(242, 224, 205, 0.39);
            color: #C6C6C6;
            transition: all 0.3s;
            z-index: 3;

            &.active {
                width: calc(100% + 2px);
                height: calc(100% + 2px);
                font-size: 1rem;
                color: #c63939;
                background: rgb(84, 115, 138);
            }
        }
    </style>

</head>

<body>
    <div class="app" style="overflow: hidden;">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title">训战研判系统平台</div>
            <div class="header-menu">

            </div>
        </div>
        <div class="contain">
            <div class="contain-menu animate__animated animate__slideInLeft">

            </div>
            <div class="contain-table">
                <div class="contain-table-tool">
                    <form class="layui-form" action=""
                        style="background: linear-gradient(to right, rgba(0,0,0,0),rgba(2, 36, 55,0.8));padding-left: 0.05rem;">
                        <div class="form-item">
                            <input type="text" name="name" placeholder="名称" class="layui-input" lay-affix="clear" />
                        </div>
                        <select name="status" lay-filter="status-select">
                            <option value="">状态</option>
                            <option value="1">启用</option>
                            <option value="2">停用</option>

                        </select>
                        <div class="layui-btn" lay-submit lay-filter="search"><img src="../static/img/icon2.png">查询
                        </div>
                        <div class="layui-btn add" onclick="tableHandle(3)"><img src="../static/img/icon1.png">新增</div>
                        <button type="reset" id="resetSearch"
                            class="layui-btn layui-btn-primary btn-reset layui-hide">重置</button>
                    </form>
                </div>
                <div class="contain-table-list">
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>
            <script type="text/html" id="ID-table-templet-switch">
                <input type="checkbox" name="status" value="{{= d.id }}" title="启用|" lay-skin="switch"
                    lay-filter="templet-status" {{=d.status==1 ? "checked" : "" }}>
            </script>
            <script type="text/html" id="ID-bound-templet">
                <div id="bound-transfer">
                    <form class="layui-form layui-form-pane" id="add-form"  lay-filter="editForm"  action="">
                        <div class="form-item">
                            <label class="layui-form-label">训练组名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-affix="clear" placeholder="请输入" lay-verify="required"
                                class="layui-input">
                            </div>
                        </div>
                        <div class="form-item" id="team-bound">
                            <div class="form-item" id="person-list">
                                <div class="bound-title">请选择班组人员（高亮代表状态为已就位，不可重复选择）</div>
                                <div class="bound-con">
                                </div>
                            </div>
                            <div class="form-item" id="bound-list">
                                <div class="bound-title">请将消防员就绪相应位置（数字为位置顺序）</div>
                                <div class="bound-con">
                                </div>
                            </div>
                        </div>

                        <div class="form-item pane-tool" style="height: 0.56rem;margin-top: 0.3rem;" >
                            <button class="layui-btn" lay-submit lay-filter="edit">保存</button>
                        </div>
                    </form>
                </div>
            </script>
        </div>
    </div>



    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/biz/trainTeam.js"></script>
</body>

</html>